<template>
  <el-form-item :prop="prop" :label="label" :rules="rulesList">
    <el-input v-model="text" type="textarea" :placeholder="placeholder||placeholderText" :maxlength="maxlength" v-bind="$attrs" v-on="$listeners" />
  </el-form-item>
</template>

<script>
import { mixin } from './mixin'
export default {
  name: 'Textarea',
  mixins: [mixin],
  model: {
    prop: 'value',
    event: 'changeModel'
  },
  props: {
    value: null,
    maxlength: {
      type: Number,
      default: 300
    },
    autosize:{
      type: Object,
      default:() => ({minRows:2,maxRows:4})
    }
  },
  data() {
    return {
      placeholderText: '请输入'
    }
  },
  computed: {
    text: {
      get() {
        return this.value || null
      },
      set(val) {
        this.$emit('changeModel', val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/.el-textarea {
  max-width: 300px;
  min-height: 100px;
  display: flex;
  .el-textarea__inner {
    margin-top: 4px;
  }
}
</style>

